<template>
  	<div class="game">
		<div class="bg">
			<img src="../../assets/img/game-background.png" alt="" />
		</div>
    	<div class="gas-btn" @click="inflation">
      		<img src="../../assets/img/gas-btn.png" alt="" />
      		<div class="text">打气</div>
    	</div>
		<div class="retire-btn" @click="retire">
			<img src="../../assets/img/retire-btn.png" alt="" />
			<div class="text">提现</div>
		</div>
		<div class="exit-btn" @click="exit">
			<img src="../../assets/img/exit-btn.png" alt="" />
			<div class="text">退出</div>
		</div>
		<img
			v-if="initializing"
			class="inflation"
			src="../../assets/img/inflation.gif"
			alt=""
		/>
    	<img v-if="gameOver" class="boom" src="../../assets/img/boom.gif" alt="" />
		<div class="retire">
			<div class="item">
				<div class="l">剩余：</div>
				<div class="r">{{ surplusNum }}</div>
			</div>
			<div class="item">
				<div class="l">已存入：</div>
				<div class="r">￥ {{ retireMoney }}</div>
			</div>
		</div>
		<div class="exchange">
			<div class="text">兑换为</div>
			<div class="num">￥ {{ money }}</div>
		</div>
		<el-dialog
		title="提示"
		:visible.sync="dialogVisible"
		width="30%"
		:before-close="handleClose"
		>
			<span>{{ msgBox.msg }}</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false" v-if="msgBox.showCancel"
				>取 消</el-button
				>
				<el-button type="primary" @click="dialogVisible = false"
				>确 定</el-button
				>
			</span>
		</el-dialog>
  	</div>
</template>

<script>
export default {
  name: "game-balloon",
  data: () => ({
    surplusNum: 50, //剩余次数，默认50
    inflationNum: 0, //已打气次数
    initializing: false, //打气状态
    boom: 0, //打气球破裂次数，最少三次，最多十次
    money: 0, //打气球产生的金额，次数越多金额越大
    retireMoney: 0, //本局游戏可提现金额
    gameOver: false,
    dialogVisible: false,
    msgBox: {
      showCancel: "",
      msg: "",
    },
  }),
  mounted() {
    this.init();
  },
  methods: {
    init() {
		// console.log('当前--',this.boom)
      	this.boom = Math.floor(Math.random() * (10 - 3)) + 3;
		// console.log('当前------',this.boom)
      	// this.boom=2
    },
    inflation() {
      	if (this.gameOver || this.initializing) return;
      	if (this.surplusNum == 0) {
			this.msgBox = {
				msg: "当前剩余游戏次数不足，无法打气",
				showCancel: false,
			};
        	this.dialogVisible = true;
        	return;
      	}
      	this.surplusNum -= 1;
      	this.initializing = true;
		setTimeout(() => {
			this.initializing = false;
		}, 4000);
      	this.inflationNum += 1;
      	this.money = this.money+1;
      	if (this.inflationNum == this.boom) {
        	this.gameOver = true;
        	this.initializing = false;
        	this.money = 0;
			setTimeout(() => {
				this.gameOver = false;
				this.msgBox = {
					msg: "气球被打爆了，可提现金额清零",
					showCancel: false,
				};
				this.dialogVisible = true;
			}, 1200);
			this.inflationNum=0
			this.init()
      	}
    },
    retire() {
      this.retireMoney += this.money;
      this.money = 0;
    },
    handleClose(done) {
      this.dialogVisible = false;
    },
    exit() {
      this.$router.push("/order/list");
    },
  },
  computed: {
    windowWidth() {
      return document.documentElement.clientWidth || document.body.clientWidth;
    },
    windowHeight() {
      return (
        document.documentElement.clientHeight || document.body.clientHeight
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gas-btn {
  position: absolute;
  left: 30%;
  top: 50%;
  text-align: center;
}
.gas-btn img,
.retire-btn img {
  width: 100px;
  height: auto;
  cursor: pointer;
}
.gas-btn .text,
.retire-btn .text,
.exit-btn .text {
  margin-top: 10px;
  font-size: 20px;
  color: #b18755;
}
.inflation,
.boom {
  position: absolute;
  left: 35%;
  top: 0;
  width: 42%;
  height: auto;
}
.retire-btn {
  position: absolute;
  right: 10%;
  top: 50%;
  text-align: center;
}
.exit-btn {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 62px;
  text-align: center;
  cursor: pointer;
}
.exit-btn img {
  width: 100%;
  height: auto;
}
.retire {
  position: absolute;
  right: 10%;
  top: 10%;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 260px;
  height: 110px;
  padding: 25px;
  background: url("../../assets/img/game-bg2.png");
  background-size: cover;
  border-radius: 15px;
}
.retire .item {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
}
.retire .item .l {
  color: #fff;
}
.retire .item .r {
  flex: 1;
  text-align: right;
  color: #73593b;
}
.exchange {
  position: absolute;
  right: 30%;
  top: 52%;
  overflow: hidden;
  box-sizing: border-box;
  width: 250px;
  height: 80px;
  padding: 16px 0;
  background: url("../../assets/img/game-bg1.png");
  background-size: cover;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  border-radius: 15px;
}
.exchange .text {
  margin-bottom: 5px;
  color: #fff;
}
.exchange .num {
  color: #73593b;
}
</style>